<template>
	<view class="padding">
		<view v-for="(item,index) in msgList" class="padding-bottom" :key="index">
			<view class="flex justify-between">
				<view class="flex align-center">
					<view class="padding-right-xs">
						<image style="height: 85upx;width: 85upx;border-radius: 20upx" :src="item.logo" alt="" />
					</view>
					<view>
						<view style="font-size: 30upx;font-weight: 600;letter-spacing: 3upx">{{item.title}}</view>
						<view class="text padding-top-xs" style="font-weight: 500;color: #9D9D9D">
							{{item.content}}
						</view>
					</view>
				</view>
				<view>
					<view class="text" style="font-weight: 500;color: #9D9D9D">{{item.lastTime}}</view>
					<view class="flex justify-end" v-if="item.pending > 0">
						<view class="flex justify-center align-center margin-top-xs"
							style="height: 40upx;width:40upx;  background-color: #F68687;border-radius: 50upx;">
							<view style="color: aliceblue;">{{item.pending}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="under-line padding-top-sm" />
		</view>
		<view>
			<canvas v-if="showCanvas" class="watermarkCans" canvas-id="watermarkCanvas"></canvas>
		</view>
	</view>

</template>

<script>
	import watermark from '@/common/watermark.js'
	export default {
		mixins: [watermark],
		computed: {
			name() {
				return this.$store.getters.name
			},
			mobile() {
				return this.$store.getters.mobile
			}
		},
		mounted() {
			this.initWatermark(); // 可以在水印内容准备好后执行初始化
		},
		data() {
			return {
				canvasText: `${this.$store.getters.name}`,
				canvasSecondText: `${this.$store.getters.mobile}`,
				msgList: [{
						logo: '/static/index/notice.png',
						title: '公告',
						content: '关于中秋节放假通知礼品公告',
						lastTime: '15分钟前',
						pending: 5
					},
					{
						logo: '/static/index/wait.png',
						title: '待办事项',
						content: '张毛毛的事假申请审批',
						lastTime: '1小时前',
						pending: 5
					},
					{
						logo: '/static/index/meeting.png',
						title: '会议提醒',
						content: '今日上午11:00第三季度目标会议',
						lastTime: '2小时前',
						pending: 5
					},
					{
						logo: '/static/index/message.png',
						title: '通知',
						content: '您的事项申请当前节点hr申请同意',
						lastTime: '3小时前',
						pending: 0
					},
				]
			}
		}

	}
</script>

<style scoped lang="less">
	.img {
		width: 10upx;
		height: 10upx;
		border-radius: 30upx;
	}

	.under-line {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background-color: #e1e1e1;
		}
	}
</style>